<template>
  <div class="footer_box">
    <!-- <h2>CopyRight © 2015-2020 乐推技术组出品00</h2> -->
    <div class="footer_main">
      <div class="footer_top">
        <div class="footerli">
          <P>关于我们</P>
          <ul>
            <li v-for="item in uslist" :key="item">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>
        <el-divider class="line" direction="vertical"></el-divider>
        <div class="footerli">
          <P>选品服务</P>
          <ul>
            <li v-for="item in chooselist" :key="item">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>
        <div class="footerli">
          <P>导购推广</P>
          <ul>
            <li v-for="item in tglist" :key="item">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>
        <div class="footerli">
          <P>自媒体中心</P>
          <ul>
            <li v-for="item in wemedialist" :key="item">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>
        <div class="footerli">
          <P>流量变现</P>
          <ul>
            <li v-for="item in sellofflist" :key="item">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>
        <div class="footerli">
          <P>开放平台</P>
          <ul>
            <li v-for="item in platformlist" :key="item">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>
        <el-divider class="line" direction="vertical"></el-divider>
        <div class="footerli">
          <P>帮助中心</P>
          <ul>
            <li v-for="item in helplist" :key="item">
              <a href="#">{{ item }}</a>
            </li>
          </ul>
        </div>
        <div class="consult">
          <el-image
            style="width: 80px; height: 80px"
            :src="require('@/assets/images/wx.png')"
            fit="fill"
          ></el-image>
          <div class="consultright">
            <p>在线咨询</p>
            <div class="data">周一到周日 9:00-18:00</div>
            <div>
              <el-button round class="btn" plain>售前咨询</el-button>
            </div>
            <el-button round class="btn" plain>售后咨询</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="footer_bot">
      <p>
        <span style="margin-right:10px"
          >LETUITT Designed and Developed ◎CopyRight 2012-2020</span
        >
        |
        <span style="margin-left:10px;margin-right:10px"
          >乐推联盟letuilm.com</span
        >
        |
        <span style="margin-left:10px">豫ICP备17043744号-1</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "footerbox",
  data() {
    return {
      uslist: ["公司简历", "企业文化", "合作联系", "加入我们"],
      chooselist: ["选品库", "品牌优选", "实时榜单", "专辑市场", "咚咚抢"],
      tglist: ["CMS网站", "导购APP", "每日精选", "9块9包邮"],
      wemedialist: ["自媒体入驻", "商家合作"],
      sellofflist: ["网站流量变现", "变现学院"],
      platformlist: ["开放平台", "API市场", "选品库方案", "移动导购方案"],
      helplist: [
        "导购常见问题",
        "自媒体入驻规则",
        "流量变现学院",
        "开放平台帮助"
      ]
    };
  },

  computed: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style lang="less" scoped>
.footer_box {
  width: 100%;
  background: url("~@/assets/images/footerbg.png") no-repeat center;
  background-size: 100% 100%;
  .footer_main::v-deep {
    width: 1200px;
    margin: 0 auto;
    .footer_top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .footerli {
        margin-top: 30px;
        text-align: left;
        p {
          font-size: 18px;
          font-weight: 400;
          padding-bottom: 25px;
        }
        li {
          padding-bottom: 8px;
        }
      }
      .line {
        display: inline-block;
        width: 1px;
        background-color: #b7b6b6;
        height: 180px;
        margin: 0px 40px;
        margin-top: 25px;
      }
      .consult {
        display: flex;
        justify-items: flex-start;
        align-items: flex-start;
        margin-top: 30px;
        .consultright {
          text-align: left;
          margin-left: 10px;
          p {
            font-size: 18px;
            font-weight: 400;
            padding-bottom: 25px;
          }
          .data {
            color: #888686;
            margin-bottom: 10px;
          }
          .btn {
            margin-top: 10px;
            padding: 10px 33px;
            background-color: #eaeaea;
            border: 1.5px solid;
          }
          // .el-button {
          //   border: 2px solid #dcdfe6;
          // }
        }
      }
    }
  }
  .footer_bot {
    padding-top: 10px;
    padding-bottom: 30px;
    p {
      font-size: 14px;
      color: #888686;
    }
  }
}
</style>
